<template>
  <div v-permission="'设置'" style="background: #fff; height: 100vh">
    <div class="box">
      <div class="container">
        <nut-uploader   accept="image/*" :before-upload="beforeUpload"  >
          <nut-image
            style="width: 100px; height: 100px"
            radius="50"
            class="nutImg"
            showError
            :src="formData?.avatar"
          >
            <template #error>
              <nut-image
                style="width: 100px; height: 100px"
                radius="50"
                class="nutImg"
                src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png"
              />
            </template>
          </nut-image>
          <img class="canemr" src="@/assets/center/camaer.png" alt="" />
        </nut-uploader>
      </div>
    </div>
    <div class="content">
      <nut-form :model-value="formData" ref="ruleForm" :rules="rules">
        <nut-form-item label="团长名称" prop="nickname">
          <nut-input
            class="nut-input-text"
            v-model="formData.nickname"
            placeholder=""
            type="text"
          />
        </nut-form-item>
        <nut-form-item label="联系电话" prop="phone">
          <nut-input
            class="nut-input-text"
            v-model="formData.phone"
            placeholder=" "
            type="text"
          />
        </nut-form-item>
        <nut-form-item label="团长介绍" prop="user_intro">
          <nut-input
            class="nut-input-text"
            v-model="formData.user_intro"
            placeholder=""
            type="textarea"
            max-length="50"
            rows="3"
          />
        </nut-form-item>
        <div class="btn">
          <nut-button
            type="primary"
            block
            color="linear-gradient(to right, #3EBD33, #9FDF4F)"
            @click="submit"
            >提交</nut-button
          >
        </div>
      </nut-form>
    </div>
  </div>
  <!-- <Cropper v-if="cropperVisible" :imagePath="imagePath"   @save="onSave" @cancel="onCancel"/> -->
</template>

<script lang="ts" setup>
import useSetting from "@/composable/setting/useSetting";
// import Cropper from 'vue3-cropper'
// import 'vue3-cropper/lib/vue3-cropper.css'
const {
  formData,
  submit,
  ruleForm,
  rules,
  beforeUpload,
  commstore,
  checkeUrl,
  cropperVisible,
  imagePath,
  
} = useSetting();
</script>
<style scoped lang="scss">
.avctar {
  display: block;
  width: 180px;
  height: 180px;
  margin: 0 auto;
}
.box {
  padding: 50px 0;
}
.container {
  position: relative;

  width: 180px;
  height: 180px;

  margin: 0 auto;
}
.btn {
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  padding: 0 60px;
}
.content {
  padding: 0 20px;
}
:deep(.input-text::input-placeholder) {
  color: red !important;
}
.nutImg {
  display: block;
  margin: 0 auto;
}
.canemr {
  display: block;
  position: absolute;
  width: 48px;
  height: 48px;
  bottom: 0;
  right: 0;
}
</style>
